/**
 * 规约扫描结果的规则卡片
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Tag } from '@teamix/ui';
import { YunxiaoIcon } from '@alife/devops-ui';
import './index.scss';
import track from 'utils/track';
import MarkdownIt from 'markdown-it';
import milt from 'markdown-it-link-target';
import hljs from 'utils/hl.js';
import utils from 'utils/index';
import intl from '../../locale';

const md = new MarkdownIt({
  html: true,
}).use(milt, {
  target: '_blank',
});

export default class RuleCard extends React.Component {
  static propTypes = {
    rule: PropTypes.object,
  };

  static defaultProps = {
    rule: {},
  };

  state = {
    isShowDetail: false,
  };

  level = { Major: 'Major', Critical: 'Critical', Blocker: 'Blocker' };

  color = { Major: 'blue', Critical: 'orange', Blocker: 'red' };

  classLevel = { Major: 'major', Critical: 'critical', Blocker: 'blocker' };

  render() {
    // const { rule, commentEle } = this.props;
    const { rule } = this.props;
    const { isShowDetail } = this.state;
    return (
      <div className="rule-card-wrapper">
        <div className="rule-card">
          <div
            className={`rule-card-header ${this.state.isShowDetail ? 'has-border' : 'no-border'}`}
          >
            <div className="rule-card-header-left">
              <div className="rule-card-header-left-top">
                <img
                  className="rule-card-header-yundou"
                  alt={intl.get({
                    id: 'code-assets.components.ruleCard.rule.YundouRobot',
                    defaultMessage: '云豆机器人',
                  })}
                  src="https://img.alicdn.com/tfs/TB1WYSpIQL0gK0jSZFtXXXQCXXa-400-401.png"
                />
                {intl.get({
                  id: 'code-assets.components.ruleCard.rule.KidneyBeans',
                  defaultMessage: '云豆',
                })}

                <Tag>bot</Tag>
                <span className="rule-card-header-time">
                  {utils.getBeautyTime(rule.intro_time)}
                </span>
              </div>
              <div className="rule-card-header-left-bottom">
                <span className="rule-card-header-left-tag">
                  <Tag color={this.color[rule.level]}>{this.level[rule.level]}</Tag>
                </span>
                <span className="rule-card-header-name" title={rule.title}>
                  {rule.title}
                </span>
                <span />
                {rule.description ? (
                  <span
                    className="rule-card-detail-tag"
                    onClick={() => {
                      track({
                        action: 'show_issue_detail',
                        page: 'Repo-MR-changes',
                      });

                      this.setState({
                        isShowDetail: !isShowDetail,
                      });
                    }}
                  >
                    <YunxiaoIcon type="more-line" size="small" />
                  </span>
                ) : null}
              </div>
            </div>
          </div>
          <div
            className="rule-card-body"
            style={{ display: this.state.isShowDetail ? 'block' : 'none' }}
          >
            {/* <div className="rule-card-body-label">
              <span>类别： 可维护性</span>
              <span className="plugin-label">扫描插件： JAVA规约扫描</span>
              </div>
              <div className="rule-card-body-des">
              所有的抽象方法（包括接口中的方法）必须要用 javadoc
              注释，除了返回值、参数、异常说明外，还必须指出该方法做什么事情，实现什么功能
              </div> */}
            <div className="rule-card-body-title">
              {intl.get({
                id: 'code-assets.components.ruleCard.rule.ProblemDescription',
                defaultMessage: '问题描述',
              })}
            </div>
            <div
              className="rule-card-body-content"
              dangerouslySetInnerHTML={{ __html: md.render(rule.description || '') }}
            />

            {rule.suggestion ? (
              <div>
                <div className="rule-card-body-title">
                  {intl.get({
                    id: 'code-assets.components.ruleCard.rule.ModificationSuggestions',
                    defaultMessage: '修改建议',
                  })}
                </div>
                <div className="rule-card-body-content">
                  <code>
                    <div
                      dangerouslySetInnerHTML={{
                        __html: hljs.highlight(rule.language || 'java', rule.suggestion || '', true)
                          .value,
                      }}
                    />
                  </code>
                </div>
              </div>
            ) : null}
          </div>
          {/* {commentEle && (
            <div
              className={`rule-comment-container ${this.state.isShowDetail ? 'border-top' : ''}`}
            >
              {React.cloneElement(commentEle, {
                ref: (ref) => {
                  this.commentRef = ref;
                },
              })}
            </div>
          )} */}
        </div>
      </div>
    );
  }
}
